<template>
  <div class="lesson-box">
    <!-- 系列课程样式 -->
    <a class="img" :href="`/curriculum_details/${itemInfo.id}.html`" :title="itemInfo.title">
      <el-image :src="itemInfo.imgs && itemInfo.imgs.length > 0 ? itemInfo.imgs[0] : ''" :alt="itemInfo.title" style="width: 100%;height: 100%;" />
    </a>
    <a class="title" :href="`/curriculum_details/${itemInfo.id}.html`" :title="itemInfo.title">{{ itemInfo.title }}</a>
    <div class="content" v-html="itemInfo.brief"></div>
    <a class="el-button el-button--warning" :href="`/curriculum_details/${itemInfo.id}.html`">立即报名</a>
  </div>
</template>

<script setup>
defineProps({
  itemInfo: {
    type: Object,
    default: {}
  }
})
</script>

<style lang="less" scoped>
// 单行文本超出省略号
.overText(@max-width) {
  max-width: @max-width;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// 多行文本超出省略
.overTexts(@line-count, @width, @line-height, @font-size) {
  display: -webkit-box;
  -webkit-line-clamp: @line-count;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  width: @width;
  line-height: @line-height;
  font-size: @font-size;
}

.lesson-box {
  width: 390px;
  height: 390px;
  background: #fff;
  border-radius: 10px;
  position: relative;

  >.img {
    width: 390px;
    height: 200px;
    display: block;
    overflow: hidden;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;

    >img {
      width: 390px;
      height: 200px;
      transition: transform 0.3s linear;
    }
  }

  .title {
    display: block;
    margin: 15px 20px 0 20px;
    font-size: 20px;
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .content {
    .overTexts(3, 356px, 23px, 16px);
    color: #666;
    margin-left: 20px;
    margin-top: 18px;
  }

  >.el-button {
    width: 90px;
    height: 30px;
    font-size: 16px;
    // background: #FF9000;
    background: rgba(255, 144, 0, 0.8);
    border: none;
    color: #fff;
    position: absolute;
    bottom: 13px;
    right: 12px;
    // &:hover {
    //     // box-shadow: @ms;
    //     background: #FF9000;
    // }
  }

  &:hover>.el-button {
    // box-shadow: @ms;
    background: #FF9000;
  }

  &:hover>.img>img {
    transform: scale(1.2);
  }
}
</style>